<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">账单明细</block>
		</cu-custom>
		
		<view class="padding">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
					<u-tabs 
						:list="navList" 
						@click="navClick" 
						keyName="name"
						:scrollable="false"
						lineColor="var(--theme-color)"
						:activeStyle="{color:'var(--theme-color)',fontWeight:'bold'}">
					</u-tabs>
				</u-sticky>
			</view>
		</view>
		
		<!-- 记录列表 -->
		<view class="list padding padding-top-0">
			<view class="bg-white radius-xl padding-sm">
				<view class="item padding-tb" v-for="(item,index) in list" :key="index" :class="index != [list.length -1]?'solid-bottom':''">
					<template v-if="item.scene == 10">
						<view class="status-icon">
							<text class="text-green cuIcon-roundcheckfill"></text>
						</view>
						<view class="content margin-left">
							<view class="grid col-2 text-bold">
								<view class="status-text text-green">
									充值成功
								</view>
								<view class="text-right text-red">￥{{item.money}}</view>
							</view>
							<view class="text-sm text-gray desc-content">
								<view class="time" >
									赠送金额：￥{{item.rechargeLog.give}}
								</view>
								<view class="order-no">
									充值编号：{{item.order_no}}
								</view>
								<view class="time">
									充值时间：{{item.create_time}}
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="status-icon">
							<text class="text-green cuIcon-formfill"></text>
						</view>
						<view class="content margin-left">
							<view class="grid col-2 text-bold">
								<view class="status-text text-green">
									支付成功
								</view>
								<view class="text-right text-red">-￥{{item.money}}</view>
							</view>
							<view class="text-sm text-gray desc-content">
								<view class="order-no">
									订单编号：{{item.order_no}}
								</view>
								<view class="time">
									支付时间：{{item.create_time}}
								</view>
							</view>
						</view>
					</template>
				</view>
				
				<emptyData type="notLog" top="10" text="暂无余额记录"></emptyData>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navList:[
					{name:'充值',scene:10},
					{name:'消费',scene:20},
				],
				current_page:1,
				list:[]
			};
		},
		onLoad() {
			// this.getList();
		},
		methods:{
			getList(){
				let self = this;
				this.$api.get({
					url:'user.Wallet/walletLog',
					data:{
						scene:self.navList[self.navIndex].scene,
						current_page:self.current_page
					},
					success:res=>{
						self.list = [...self.list,...res.data.list.data];
						self.current_page = res.data.current_page + 1;
					}
				})
			},
			navClick(e){
				this.navIndex = e.index;
				this.current_page = 1;
				this.list = [];
				// this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	.item{
		display: flex;
		align-items: center;
		.status-icon{
			text{
				font-size: 50upx;
			}
		}
		.content{
			flex: 1;
			.status-text{
				font-size: 30upx;
			}
			.desc-content{
				padding-top: 12upx;
				line-height: 35upx;
			}
		}
	}
}
</style>
